<template>

  <el-menu class="theme-menus" :default-active="activeMenu">
    <menus-item
        v-for="route in permission_routes"
        :key="route.path"
        :item="route"
        :base-path="route.path"
    />
  </el-menu>

</template>

<script>

import MenusItem from "./MenusItem";
import permission_routes from "@/router/index.js";

console.log("permission_routes",permission_routes)

export default {
  name: "MenusIndex",
  components: {MenusItem},
  computed: {
    permission_routes() {
      return permission_routes;
    },
    activeMenu() {
      const route = this.$route;
      const {meta, path} = route;
      // if set path, the sidebar will highlight the path you set
      if (meta.activeMenu) {
        return meta.activeMenu;
      }
      return path;
    }
  },
};
</script>

<style lang="scss">
.theme-menus {

  .el-menu-item, .el-submenu__title {
    height: 48px;
    line-height: 48px;
    margin: 8px 16px;
    border-radius: 8px;

    &:hover {
      background-color: rgba(0, 0, 0, 0.06);
    }
  }

  .el-menu-item.is-active {
    color: #FFF;
    background-color: #ff4d4f;
  }

  .el-submenu .el-menu-item {
    min-width: 120px;
    height: 40px;
    line-height: 40px;
    margin: 8px 28px;
  }
}

.theme-menus.el-menu {
  border-right: 0;
}

</style>
